<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete, Refresh, Check, Close, CreditCard, Setting, Edit } from '@element-plus/icons-vue'
import request from '@/utils/request'

// Tabs
const route = useRoute()
type Tab = 'bank' | 'recharge' | 'withdraw' | 'settings'
const active = ref<Tab>((route.query.tab as any) || 'bank')

// ========== 은행 카드 관리 ==========
const bankList = ref<any[]>([])
const bankForm = reactive({
  displayName: '',
  bankName: '',
  accountName: '',
  accountNumber: '',
  note: '',
  qrCodeUrl: '',
  isActive: true,
})
const bankDialog = ref(false)
const bankLoading = ref(false)

async function fetchBanks() {
  bankLoading.value = true
  try {
    const { data } = await request.get('/api/admin/bank-accounts')
    bankList.value = data
  } finally {
    bankLoading.value = false
  }
}

async function saveBankAccount() {
  try {
    await request.post('/api/admin/bank-accounts', bankForm)
    ElMessage.success('저장됨')
    bankDialog.value = false
    resetBankForm()
    await fetchBanks()
  } catch (error) {
    console.error('은행 카드 저장 실패:', error)
  }
}

async function deleteBankAccount(id: any) {
  await ElMessageBox.confirm('이 은행 카드를 삭제하시겠습니까?', '알림', { type: 'warning' })
  await request.delete(`/api/admin/bank-accounts/${id}`)
  ElMessage.success('삭제됨')
  await fetchBanks()
}

function resetBankForm() {
  Object.assign(bankForm, {
    displayName: '',
    bankName: '',
    accountName: '',
    accountNumber: '',
    note: '',
    qrCodeUrl: '',
    isActive: true,
  })
}

// ========== 충전 심사 ==========
const rechargeList = ref<any[]>([])
const rechargeLoading = ref(false)
const rechargeStatusFilter = ref<string>('pending')

async function fetchRecharges(status?: string) {
  rechargeLoading.value = true
  try {
    const { data } = await request.get('/api/admin/recharges', {
      params: status ? { status } : {}
    })
    rechargeList.value = data
  } finally {
    rechargeLoading.value = false
  }
}

async function approveRecharge(row: any) {
  await request.put(`/api/admin/recharges/${row.id}/approve`)
  ElMessage.success('승인됨')
  await fetchRecharges(rechargeStatusFilter.value || undefined)
}

async function rejectRecharge(row: any) {
  await ElMessageBox.confirm('이 충전을 거부하시겠습니까?', '알림', { type: 'warning' })
  await request.put(`/api/admin/recharges/${row.id}/reject`, { reason: '관리자 거부' })
  ElMessage.success('거부됨')
  await fetchRecharges(rechargeStatusFilter.value || undefined)
}

// ========== 출금 심사 ==========
const withdrawList = ref<any[]>([])
const withdrawLoading = ref(false)
const withdrawStatusFilter = ref<string>('pending')

async function fetchWithdrawals(status?: string) {
  withdrawLoading.value = true
  try {
    const { data } = await request.get('/api/admin/withdrawals', {
      params: status ? { status } : {},
    })
    withdrawList.value = data
  } finally {
    withdrawLoading.value = false
  }
}

async function approveWithdraw(row: any) {
  await request.put(`/api/admin/withdrawals/${row.id}/approve`)
  ElMessage.success('승인됨')
  await fetchWithdrawals(withdrawStatusFilter.value || undefined)
}

async function rejectWithdraw(row: any) {
  await ElMessageBox.confirm('이 출금을 거부하시겠습니까?', '알림', { type: 'warning' })
  await request.put(`/api/admin/withdrawals/${row.id}/reject`, { remark: '관리자 거부' })
  ElMessage.success('거부됨')
  await fetchWithdrawals(withdrawStatusFilter.value || undefined)
}

// 편집 은행 정보
const bankInfoDialog = ref(false)
const bankInfoForm = reactive({
  id: '',
  bankName: '',
  accountName: '',
  accountNumber: '',
  accountId: ''
})

function editBankInfo(row: any) {
  bankInfoForm.id = row.id
  bankInfoForm.bankName = row.payoutBankName || ''
  bankInfoForm.accountName = row.payoutAccountName || ''
  bankInfoForm.accountNumber = row.payoutAccountNumber || ''
  bankInfoForm.accountId = row.payoutAccountId || ''
  bankInfoDialog.value = true
}

async function saveBankInfo() {
  if (!bankInfoForm.bankName || !bankInfoForm.accountName || !bankInfoForm.accountNumber || !bankInfoForm.accountId) {
    ElMessage.error('완전한 은행 정보를 입력하세요')
    return
  }

  try {
    await request.put(`/api/admin/withdrawals/${bankInfoForm.id}/bank-info`, {
      bankName: bankInfoForm.bankName,
      accountName: bankInfoForm.accountName,
      accountNumber: bankInfoForm.accountNumber,
      accountId: bankInfoForm.accountId
    })
    ElMessage.success('은행 정보가 업데이트되었습니다')
    bankInfoDialog.value = false
    await fetchWithdrawals(withdrawStatusFilter.value || undefined)
  } catch (error) {
    ElMessage.error('업데이트 실패')
  }
}

// ========== 설정 관리 ==========
const settings = ref({
  rate: 0,
  feePercent: 0,
  minPoints: 0
})

async function loadSettings() {
  const { data } = await request.get('/api/admin/settings/withdraw')
  settings.value = data
}

async function saveSettings() {
  const settingsData = {
    ...settings.value,
    rate: parseFloat(String(settings.value.rate)) || 0,
    feePercent: parseFloat(String(settings.value.feePercent)) || 0,
    minPoints: parseInt(String(settings.value.minPoints)) || 0
  }
  await request.put('/api/admin/settings/withdraw', settingsData)
  ElMessage.success('저장됨')
}

// 格式化数字显示
function formatDecimal(val: any): string {
  try {
    if (val === null || val === undefined || val === '') return '0.00'
    const n = Number(val)
    return Number.isFinite(n) ? n.toFixed(2) : String(val)
  } catch (e) {
    console.warn('formatDecimal error:', e, val)
    return String(val)
  }
}

// 计算属性
const filteredRecharges = computed(() => {
  if (!rechargeStatusFilter.value) return rechargeList.value
  return rechargeList.value.filter(item => item.status === rechargeStatusFilter.value)
})

const filteredWithdrawals = computed(() => {
  if (!withdrawStatusFilter.value) return withdrawList.value
  return withdrawList.value.filter(item => item.status === withdrawStatusFilter.value)
})

onMounted(() => {
  fetchBanks()
  fetchRecharges(rechargeStatusFilter.value)
  fetchWithdrawals(withdrawStatusFilter.value)
  loadSettings()
})
</script>

<template>
  <div class="payment-management">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <el-icon class="page-icon" size="24">
          <CreditCard />
        </el-icon>
        <div class="header-text">
          <h1 class="page-title">결제 관리</h1>
          <p class="page-subtitle">결제 내역과 수익을 관리합니다</p>
        </div>
      </div>
    </div>

    <!-- 标签页导航 -->
    <div class="tabs-container">
      <el-tabs v-model="active" class="mobile-tabs">
        <!-- 은행 카드 관리 -->
        <el-tab-pane label="은행 카드" name="bank">
          <div class="tab-content">
            <div class="toolbar">
              <el-button type="primary" :icon="Plus" @click="bankDialog = true" size="small">
                카드 추가
              </el-button>
              <el-button :icon="Refresh" @click="fetchBanks" size="small">
                새로고침
              </el-button>
            </div>

            <div v-loading="bankLoading" class="card-list">
              <div v-if="bankList.length === 0" class="empty-state">
                <el-empty description="등록된 은행 카드가 없습니다" />
              </div>
              <div v-else class="bank-cards">
                <div v-for="bank in bankList" :key="bank.id" class="bank-card">
                  <div class="card-header">
                    <div class="card-title">{{ bank.displayName }}</div>
                    <div class="card-actions">
                      <el-tag :type="bank.isActive ? 'success' : 'info'" size="small">
                        {{ bank.isActive ? '활성' : '비활성' }}
                      </el-tag>
                      <el-button
                        type="danger"
                        :icon="Delete"
                        @click="deleteBankAccount(bank.id)"
                        size="small"
                        text
                      />
                    </div>
                  </div>
                  <div class="card-content">
                    <div class="card-row">
                      <span class="label">은행:</span>
                      <span class="value">{{ bank.bankName || '-' }}</span>
                    </div>
                    <div class="card-row">
                      <span class="label">계좌명:</span>
                      <span class="value">{{ bank.accountName || '-' }}</span>
                    </div>
                    <div class="card-row">
                      <span class="label">계좌번호:</span>
                      <span class="value">{{ bank.accountNumber || '-' }}</span>
                    </div>
                    <div v-if="bank.note" class="card-row">
                      <span class="label">메모:</span>
                      <span class="value">{{ bank.note }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 충전 심사 -->
        <el-tab-pane label="충전 심사" name="recharge">
          <div class="tab-content">
            <div class="toolbar">
              <el-select v-model="rechargeStatusFilter" @change="fetchRecharges(rechargeStatusFilter)" size="small">
                <el-option label="전체" value="" />
                <el-option label="대기중" value="pending" />
                <el-option label="승인됨" value="approved" />
                <el-option label="거부됨" value="rejected" />
              </el-select>
              <el-button :icon="Refresh" @click="fetchRecharges(rechargeStatusFilter)" size="small">
                새로고침
              </el-button>
            </div>

            <div v-loading="rechargeLoading" class="card-list">
              <div v-if="filteredRecharges.length === 0" class="empty-state">
                <el-empty description="충전 신청이 없습니다" />
              </div>
              <div v-else class="recharge-cards">
                <div v-for="item in filteredRecharges" :key="item.id" class="recharge-card">
                  <div class="card-header">
                    <div class="card-title">충전 신청 #{{ item.id }}</div>
                    <div class="card-actions">
                      <el-tag
                        :type="item.status === 'approved' ? 'success' : item.status === 'rejected' ? 'danger' : 'warning'"
                        size="small"
                      >
                        {{ item.status === 'pending' ? '대기중' : item.status === 'approved' ? '승인됨' : '거부됨' }}
                      </el-tag>
                    </div>
                  </div>
                  <div class="card-content">
                    <div class="card-row">
                      <span class="label">사용자:</span>
                      <span class="value">
                        <div>{{ item.user?.loginId || '알 수 없음' }}</div>
                        <div style="font-size: 12px; color: #666;" v-if="item.user?.name || item.user?.nickname">
                          {{ item.user?.name || item.user?.nickname }}
                        </div>
                      </span>
                    </div>
                    <div class="card-row">
                      <span class="label">충전 포인트:</span>
                      <span class="value">{{ formatDecimal(item.pointsCredited) }}</span>
                    </div>
                    <div class="card-row">
                      <span class="label">신청 시간:</span>
                      <span class="value">{{ new Date(item.createdAt).toLocaleString() }}</span>
                    </div>
                    <div v-if="item.status === 'pending'" class="card-actions-row">
                      <el-button type="success" :icon="Check" @click="approveRecharge(item)" size="small">
                        승인
                      </el-button>
                      <el-button type="danger" :icon="Close" @click="rejectRecharge(item)" size="small">
                        거부
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 출금 심사 -->
        <el-tab-pane label="출금 심사" name="withdraw">
          <div class="tab-content">
            <div class="toolbar">
              <el-select v-model="withdrawStatusFilter" @change="fetchWithdrawals(withdrawStatusFilter)" size="small">
                <el-option label="전체" value="" />
                <el-option label="대기중" value="pending" />
                <el-option label="승인됨" value="approved" />
                <el-option label="거부됨" value="rejected" />
              </el-select>
              <el-button :icon="Refresh" @click="fetchWithdrawals(withdrawStatusFilter)" size="small">
                새로고침
              </el-button>
            </div>

            <div v-loading="withdrawLoading" class="card-list">
              <div v-if="filteredWithdrawals.length === 0" class="empty-state">
                <el-empty description="출금 신청이 없습니다" />
              </div>
              <div v-else class="withdraw-cards">
                <div v-for="item in filteredWithdrawals" :key="item.id" class="withdraw-card">
                  <div class="card-header">
                    <div class="card-title">출금 신청 #{{ item.id }}</div>
                    <div class="card-actions">
                      <el-tag
                        :type="item.status === 'approved' ? 'success' : item.status === 'rejected' ? 'danger' : 'warning'"
                        size="small"
                      >
                        {{ item.status === 'pending' ? '대기중' : item.status === 'approved' ? '승인됨' : '거부됨' }}
                      </el-tag>
                    </div>
                  </div>
                  <div class="card-content">
                    <div class="card-row">
                      <span class="label">사용자:</span>
                      <span class="value">
                        <div>{{ item.user?.loginId || '알 수 없음' }}</div>
                        <div style="font-size: 12px; color: #666;" v-if="item.user?.name || item.user?.nickname">
                          {{ item.user?.name || item.user?.nickname }}
                        </div>
                      </span>
                    </div>
                    <div class="card-row">
                      <span class="label">출금 포인트:</span>
                      <span class="value">{{ formatDecimal(item.pointsToWithdraw) }}</span>
                    </div>
                    <div class="card-row">
                      <span class="label">실제 금액:</span>
                      <span class="value">{{ formatDecimal(item.actualAmount) }}</span>
                    </div>
                    <div class="card-row">
                      <span class="label">신청 시간:</span>
                      <span class="value">{{ new Date(item.createdAt).toLocaleString() }}</span>
                    </div>
                    <!-- 출금 은행 정보 -->
                    <div v-if="item.payoutBankName" class="bank-info-section">
                      <div class="bank-info-header">출금 계좌 정보</div>
                      <div class="card-row">
                        <span class="label">은행명:</span>
                        <span class="value">{{ item.payoutBankName }}</span>
                      </div>
                      <div class="card-row">
                        <span class="label">예금주명:</span>
                        <span class="value">{{ item.payoutAccountName }}</span>
                      </div>
                      <div class="card-row">
                        <span class="label">계좌번호:</span>
                        <span class="value bank-account">{{ item.payoutAccountNumber }}</span>
                      </div>
                      <div v-if="item.payoutAccountId" class="card-row">
                        <span class="label">신분증번호:</span>
                        <span class="value">{{ item.payoutAccountId }}</span>
                      </div>
                    </div>
                    <div v-else class="no-bank-info">
                      <div class="info-notice">⚠️ 은행 정보가 없습니다</div>
                    </div>
                    <div v-if="item.remark" class="card-row">
                      <span class="label">비고:</span>
                      <span class="value">{{ item.remark }}</span>
                    </div>
                    <div class="card-actions-row">
                      <div v-if="item.status === 'pending'" class="approval-buttons">
                        <el-button type="success" :icon="Check" @click="approveWithdraw(item)" size="small">
                          승인
                        </el-button>
                        <el-button type="danger" :icon="Close" @click="rejectWithdraw(item)" size="small">
                          거부
                        </el-button>
                      </div>
                      <el-button type="primary" :icon="Edit" @click="editBankInfo(item)" size="small" class="edit-bank-btn">
                        은행 정보 편집
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 설정 관리 -->
        <el-tab-pane label="설정" name="settings">
          <div class="tab-content">
            <div class="settings-form">
              <el-card class="settings-card">
                <template #header>
                  <div class="card-header">
                    <el-icon><Setting /></el-icon>
                    <span>출금 설정</span>
                  </div>
                </template>

                <el-form :model="settings" label-position="top" class="mobile-form">
                  <el-form-item label="환율 (포인트 → 원)">
                    <el-input-number
                      v-model="settings.rate"
                      :precision="2"
                      :step="0.01"
                      :min="0"
                      class="full-width"
                    />
                    <div class="form-help">1 포인트 = {{ formatDecimal(settings.rate) }} 원</div>
                  </el-form-item>

                  <el-form-item label="수수료율 (%)">
                    <el-input-number
                      v-model="settings.feePercent"
                      :precision="2"
                      :step="0.1"
                      :min="0"
                      :max="100"
                      class="full-width"
                    />
                    <div class="form-help">출금 시 차감되는 수수료 비율</div>
                  </el-form-item>

                  <el-form-item label="최소 출금 포인트">
                    <el-input-number
                      v-model="settings.minPoints"
                      :precision="0"
                      :step="100"
                      :min="0"
                      class="full-width"
                    />
                    <div class="form-help">출금 가능한 최소 포인트</div>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click="saveSettings" class="full-width">
                      설정 저장
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 은행 카드 추가 대화상자 -->
    <el-dialog v-model="bankDialog" title="은행 카드 추가" width="90%" class="mobile-dialog">
      <el-form :model="bankForm" label-position="top" class="mobile-form">
        <el-form-item label="표시명" required>
          <el-input v-model="bankForm.displayName" placeholder="카드 표시명을 입력하세요" />
        </el-form-item>

        <el-form-item label="은행명">
          <el-input v-model="bankForm.bankName" placeholder="은행명을 입력하세요" />
        </el-form-item>

        <el-form-item label="계좌명">
          <el-input v-model="bankForm.accountName" placeholder="계좌명을 입력하세요" />
        </el-form-item>

        <el-form-item label="계좌번호">
          <el-input v-model="bankForm.accountNumber" placeholder="계좌번호를 입력하세요" />
        </el-form-item>

        <el-form-item label="QR 코드 URL">
          <el-input v-model="bankForm.qrCodeUrl" placeholder="QR 코드 이미지 URL" />
        </el-form-item>

        <el-form-item label="메모">
          <el-input v-model="bankForm.note" type="textarea" placeholder="추가 메모" />
        </el-form-item>

        <el-form-item>
          <el-checkbox v-model="bankForm.isActive">활성화</el-checkbox>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="bankDialog = false">취소</el-button>
          <el-button type="primary" @click="saveBankAccount">저장</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 은행 정보 편집 대화상자 -->
    <el-dialog v-model="bankInfoDialog" title="은행 정보 편집" width="90%" class="mobile-dialog">
      <el-form :model="bankInfoForm" label-position="top" class="mobile-form">
        <el-form-item label="은행명" required>
          <el-input v-model="bankInfoForm.bankName" placeholder="은행명을 입력하세요" />
        </el-form-item>
        
        <el-form-item label="계좌 성명" required>
          <el-input v-model="bankInfoForm.accountName" placeholder="계좌 성명을 입력하세요" />
        </el-form-item>
        
        <el-form-item label="은행 카드 번호" required>
          <el-input v-model="bankInfoForm.accountNumber" placeholder="은행 카드 번호를 입력하세요" />
        </el-form-item>
        
        <el-form-item label="신분증 번호" required>
          <el-input v-model="bankInfoForm.accountId" placeholder="신분증 번호를 입력하세요" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="bankInfoDialog = false">취소</el-button>
          <el-button type="primary" @click="saveBankInfo">저장</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.payment-management {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: #f5f5f5;
}

/* 页面标题 */
.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-icon {
  color: var(--el-color-primary);
}

.header-text {
  flex: 1;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 4px 0;
}

.page-subtitle {
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin: 0;
}

/* 标签页容器 */
.tabs-container {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.mobile-tabs {
  height: 100%;
}

.mobile-tabs :deep(.el-tabs__header) {
  margin: 0;
  padding: 0 16px;
  background: #fafafa;
  border-bottom: 1px solid var(--el-border-color-light);
}

.mobile-tabs :deep(.el-tabs__nav-wrap) {
  padding: 8px 0;
}

.mobile-tabs :deep(.el-tabs__item) {
  font-size: 14px;
  padding: 0 12px;
  height: 36px;
  line-height: 36px;
}

.mobile-tabs :deep(.el-tabs__content) {
  height: calc(100% - 60px);
  overflow-y: auto;
}

/* 标签页内容 */
.tab-content {
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 工具栏 */
.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar .el-button {
  flex: 1;
  min-width: 80px;
}

.toolbar .el-select {
  flex: 1;
  min-width: 120px;
}

/* 卡片列表 */
.card-list {
  flex: 1;
  overflow-y: auto;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

/* 银行卡片 */
.bank-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bank-card {
  background: white;
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fafafa;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.card-title {
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-content {
  padding: 16px;
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.card-row:last-child {
  margin-bottom: 0;
}

.card-row .label {
  font-size: 14px;
  color: var(--el-text-color-regular);
  min-width: 80px;
}

.card-row .value {
  font-size: 14px;
  color: var(--el-text-color-primary);
  text-align: right;
  flex: 1;
  word-break: break-all;
}

.card-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.approval-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.approval-buttons .el-button {
  flex: 1;
}

.edit-bank-btn {
  width: 100%;
}

/* 充值和提现卡片 */
.recharge-cards,
.withdraw-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recharge-card,
.withdraw-card {
  background: white;
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
  overflow: hidden;
}

/* 设置表单 */
.settings-form {
  max-width: 100%;
}

.settings-card {
  border: none;
  box-shadow: none;
}

.settings-card :deep(.el-card__header) {
  padding: 16px;
  background: #fafafa;
}

.settings-card .card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.mobile-form {
  padding: 0;
}

.mobile-form .el-form-item {
  margin-bottom: 20px;
}

.mobile-form :deep(.el-form-item__label) {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.full-width {
  width: 100%;
}

.form-help {
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 4px;
}

/* 对话框 */
.mobile-dialog {
  margin: 5vh auto;
}

.mobile-dialog :deep(.el-dialog) {
  border-radius: 8px;
}

.mobile-dialog :deep(.el-dialog__header) {
  padding: 16px 20px 12px;
}

.mobile-dialog :deep(.el-dialog__body) {
  padding: 0 20px 16px;
}

.dialog-footer {
  display: flex;
  gap: 12px;
}

.dialog-footer .el-button {
  flex: 1;
}

/* 银行信息样式 */
.bank-info-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.bank-info-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--el-color-primary);
  margin-bottom: 8px;
}

.bank-account {
  font-family: monospace;
  font-weight: 500;
  color: var(--el-color-success);
}

.no-bank-info {
  margin-top: 12px;
  padding: 12px;
  background: var(--el-fill-color-light);
  border-radius: 6px;
  text-align: center;
}

.info-notice {
  font-size: 13px;
  color: var(--el-color-warning);
  font-weight: 500;
}

/* 响应式适配 */
@media (max-width: 480px) {
  .payment-management {
    padding: 12px;
  }

  .header-content {
    padding: 12px;
  }

  .page-title {
    font-size: 16px;
  }

  .tab-content {
    padding: 12px;
  }

  .mobile-dialog {
    width: 95% !important;
    margin: 2vh auto;
  }
}
</style>
